<!-- build time:Tue Dec 17 2019 19:26:47 GMT+0800 (GMT+08:00) --><!doctype html><html class="theme-next mist" lang="zh-Hans"><head><meta name="generator" content="Hexo 3.8.0"><meta name="google-site-verification" content="7Tau9WyVgxnsEY9oYedu9g0U6_8akOX3wiKbaYcrg9A"><meta name="baidu-site-verification" content="EVwLiaxdxX"><link href="/css/xps13.css" rel="stylesheet" type="text/css"><link href="/css/message.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.1.1" rel="stylesheet" type="text/css"><meta name="keywords" content="jQuery,"><link rel="alternate" href="/atom.xml" title="MrBird" type="application/atom+xml"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.1"><meta name="description" content="jQuery提供了一系列的筛选函数来对jQuery选择器选择的结果进行筛选。筛选函数大致可分为三个类别：过滤，查找和串联。过滤eq(index)获取第N个元素。index为元素位置，为正数时表示从第一个元素开始，从0算起；为负数时表示从最后一个元素开始，从-1开始。例如，获取匹配的第二个元素：12&amp;lt;p&amp;gt; This is just a test.&amp;lt;/p&amp;gt;&amp;lt;p&amp;gt; S"><meta name="keywords" content="jQuery"><meta property="og:type" content="article"><meta property="og:title" content="jQuery筛选操作"><meta property="og:url" content="http://mrbird.cc/jQuery筛选操作.html"><meta property="og:site_name" content="MrBird"><meta property="og:description" content="jQuery提供了一系列的筛选函数来对jQuery选择器选择的结果进行筛选。筛选函数大致可分为三个类别：过滤，查找和串联。过滤eq(index)获取第N个元素。index为元素位置，为正数时表示从第一个元素开始，从0算起；为负数时表示从最后一个元素开始，从-1开始。例如，获取匹配的第二个元素：12&amp;lt;p&amp;gt; This is just a test.&amp;lt;/p&amp;gt;&amp;lt;p&amp;gt; S"><meta property="og:locale" content="zh-Hans"><meta property="og:image" content="http://mrbird.cc/img/80432505-file_1493884618635_964b.png"><meta property="og:image" content="http://mrbird.cc/img/35503396-file_1493884703667_655a.png"><meta property="og:image" content="http://mrbird.cc/img/75829396-file_1493894656006_1843e.png"><meta property="og:image" content="http://mrbird.cc/img/59593815-file_1493894788985_f6f3.png"><meta property="og:updated_time" content="2019-10-28T12:14:46.300Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="jQuery筛选操作"><meta name="twitter:description" content="jQuery提供了一系列的筛选函数来对jQuery选择器选择的结果进行筛选。筛选函数大致可分为三个类别：过滤，查找和串联。过滤eq(index)获取第N个元素。index为元素位置，为正数时表示从第一个元素开始，从0算起；为负数时表示从最后一个元素开始，从-1开始。例如，获取匹配的第二个元素：12&amp;lt;p&amp;gt; This is just a test.&amp;lt;/p&amp;gt;&amp;lt;p&amp;gt; S"><meta name="twitter:image" content="http://mrbird.cc/img/80432505-file_1493884618635_964b.png"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Mist",sidebar:{position:"left",display:"always",offset:12,offset_float:0,b2t:!1,scrollpercent:!1},fancybox:!1,motion:!1}</script><title>jQuery筛选操作 | MrBird</title></head><body ondragstart="return!1" class="animsition" lang="zh-Hans" style="overflow-x:hidden;padding-right:280px"><script type="text/javascript" src="/js/mo.min.js"></script><style>@media (min-width:768px) and (max-width:991px){body .header-innerr{width:700px!important}}.header-innerr{margin:0 auto;padding:100px 0 70px;width:880px}@media (min-width:1600px){.container .header-innerr{width:1200px}}.header-innerr{position:relative}.header-innerr{padding:20px 0 0}.header-innerr:after,.header-innerr:before{content:" ";display:table}.header-innerr:after{clear:both}@media (max-width:767px){.header-innerr{width:auto;padding:10px;margin-bottom:-20px}}</style><div class="container sidebar-position-left page-post-detail"><div class="headband"></div><header id="header" class="header"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><link href="https://fonts.font.im/css?family=Merienda" rel="stylesheet"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title" style="font-family:Merienda;font-size:1.3rem">MrBird</span> <span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle"></p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section">HOME</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section">ARCHIVES</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section">TAGS</a></li><li class="menu-item menu-item-friends"><a href="/friends/" rel="section">FRIENDS</a></li><div class="sidebar-toggle" style="display:none"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i> </span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"><input autocomplete="off" placeholder="Search" spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav></div><div class="header-innerr"><div class="note info" style="margin:0;letter-spacing:.15px">🐤手把手教你搭建<strong>Spring Cloud微服务权限系统</strong>（从零到部署）：<a style="color:#40dab2;font-weight:600" href="https://www.kancloud.cn/mrbird/spring-cloud" target="_blank">https://www.kancloud.cn/mrbird/spring-cloud</a></div></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://mrbird.cc/jQuery筛选操作.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="MrBird"><meta itemprop="description" content=""><meta itemprop="image" content="/images/blogImage.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="MrBird"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">jQuery筛选操作</h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">Posted on</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-05-04T16:20:48+08:00">2017-05-04 </time></span><span></span> <span class="post-meta-divider">|</span> <span class="page-pv"><i class="fa fa-laptop"></i>&nbsp;&nbsp;Visit count <span class="busuanzi-value" id="busuanzi_value_page_pv"></span></span></div></header><div class="post-body" itemprop="articleBody"><p>jQuery提供了一系列的筛选函数来对jQuery选择器选择的结果进行筛选。筛选函数大致可分为三个类别：过滤，查找和串联。</p><h2 id="过滤"><a href="#过滤" class="headerlink" title="过滤"></a>过滤</h2><h3 id="eq-index"><a href="#eq-index" class="headerlink" title="eq(index)"></a>eq(index)</h3><p>获取第N个元素。index为元素位置，为正数时表示从第一个元素开始，从0算起；为负数时表示从最后一个元素开始，从-1开始。</p><p>例如，获取匹配的第二个元素：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span> This is just a test.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span> So is this<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).eq(<span class="number">1</span>); <span class="comment">// &lt;p&gt; So is this&lt;/p&gt;﻿​</span></span><br></pre></td></tr></table></figure><a id="more"></a><p>获取倒数第二个元素：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).eq(<span class="number">-2</span>); <span class="comment">//&lt;p&gt; This is just a test.&lt;/p&gt;</span></span><br></pre></td></tr></table></figure><p></p><h3 id="first"><a href="#first" class="headerlink" title="first()"></a>first()</h3><p>获取第一个元素。</p><p>例如，获取ul的第一个li：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'ul&gt;li'</span>).first(); <span class="comment">// &lt;li&gt;list item 1&lt;/li&gt;</span></span><br></pre></td></tr></table></figure><h3 id="last"><a href="#last" class="headerlink" title="last()"></a>last()</h3><p>和<code>first()</code>相反，获取最后一个元素。</p><h3 id="hasClass-class"><a href="#hasClass-class" class="headerlink" title="hasClass(class)"></a>hasClass(class)</h3><p><code>hasClass()</code>方法检查被选元素是否包含指定的class。</p><p>例如，判断选中元素是否含有happy类：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"happy"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = $(<span class="string">"div"</span>).hasClass(<span class="string">"happy"</span>); <span class="comment">//true</span></span><br></pre></td></tr></table></figure><h3 id="filter-selector-fn"><a href="#filter-selector-fn" class="headerlink" title="filter(selector,[fn])"></a>filter(selector,[fn])</h3><p><code>filter()</code>方法将匹配元素集合缩减为匹配指定选择器的元素。selector：字符串值，包含供匹配当前元素集合的选择器表达式。fn：回调函数，可选。</p><p>例如，保留带有select类的元素：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Hello Again<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"selected"</span>&gt;</span>And Again<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).filter(<span class="string">".selected"</span>); <span class="comment">//&lt;p class="selected"&gt;And Again&lt;/p&gt;</span></span><br></pre></td></tr></table></figure><p>使用回调函数实现：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).filter(<span class="function"><span class="keyword">function</span>(<span class="params">index</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> $(<span class="keyword">this</span>).hasClass(<span class="string">'selected'</span>);</span><br><span class="line"> &#125;);</span><br></pre></td></tr></table></figure><p></p><p><code>this</code>指当前遍历的元素，返回true的元素将被保留。</p><p>保留第一个或带有select类的元素：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).filter(<span class="string">".selected,:first"</span>); <span class="comment">// &lt;p&gt;Hello&lt;/p&gt;, &lt;p class="selected"&gt;And Again&lt;/p&gt;</span></span><br></pre></td></tr></table></figure><p></p><h3 id="is-selector-fn"><a href="#is-selector-fn" class="headerlink" title="is(selector,[fn])"></a>is(selector,[fn])</h3><p><code>is()</code>根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。fn：回调函数，可选。</p><p>例如，判断input的父元素是否为form：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"input[type='checkbox']"</span>).parent().is(<span class="string">"form"</span>) <span class="comment">//true</span></span><br></pre></td></tr></table></figure><p>使用回调函数实现：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"input[type='checkbox']"</span>).parent().is(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> $(<span class="keyword">this</span>)[<span class="number">0</span>].nodeName == <span class="string">'FORM'</span>;</span><br><span class="line"> &#125;);</span><br></pre></td></tr></table></figure><p></p><h3 id="map-callback-index-domElement"><a href="#map-callback-index-domElement" class="headerlink" title="map(callback(index,domElement))"></a>map(callback(index,domElement))</h3><p><code>map()</code>把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。</p><p>例如，有如下表单，要获取以逗号分隔的复选框列表ID：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">method</span>=<span class="string">"post"</span> <span class="attr">action</span>=<span class="string">""</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">fieldset</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"two"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">value</span>=<span class="string">"2"</span> <span class="attr">id</span>=<span class="string">"two"</span> <span class="attr">name</span>=<span class="string">"number[]"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"four"</span>&gt;</span>4<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">value</span>=<span class="string">"4"</span> <span class="attr">id</span>=<span class="string">"four"</span> <span class="attr">name</span>=<span class="string">"number[]"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"six"</span>&gt;</span>6<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">value</span>=<span class="string">"6"</span> <span class="attr">id</span>=<span class="string">"six"</span> <span class="attr">name</span>=<span class="string">"number[]"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"eight"</span>&gt;</span>8<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">value</span>=<span class="string">"8"</span> <span class="attr">id</span>=<span class="string">"eight"</span> <span class="attr">name</span>=<span class="string">"number[]"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">fieldset</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">':checkbox'</span>).map(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.id;</span><br><span class="line">&#125;).get().join(<span class="string">','</span>); <span class="comment">//"two,four,six,eight"</span></span><br></pre></td></tr></table></figure><h3 id="has-selector"><a href="#has-selector" class="headerlink" title="has(selector)"></a>has(selector)</h3><p><code>has()</code>将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。</p><p>例如，有如下嵌套的列表：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 2</span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 2-a<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 2-b<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>现在给包含ul的li添加红色背景色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$( <span class="string">"li"</span> ).has( <span class="string">"ul"</span> ).css( <span class="string">"background-color"</span>, <span class="string">"red"</span> );</span><br></pre></td></tr></table></figure><p></p><h3 id="not"><a href="#not" class="headerlink" title="not()"></a>not()</h3><p><code>not()</code>从匹配元素集合中删除元素。</p><p>例如有如下列表：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">"notli"</span>&gt;</span>list item 3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>给除了list item 3外的li添加红色背景色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$( <span class="string">"li"</span> ).not(<span class="string">"#notli"</span>).css( <span class="string">"background-color"</span>, <span class="string">"red"</span> );</span><br></pre></td></tr></table></figure><p></p><h3 id="slice-selector-end-​"><a href="#slice-selector-end-​" class="headerlink" title="slice(selector,end)﻿​"></a>slice(selector,end)﻿​</h3><p><code>slice()</code>把匹配元素集合缩减为指定的指数范围的子集。</p><p><table><tr><th>参数</th><th>描述</th></tr><tr><td>selector</td><td>基于 0 的整数值，指示开始选取元素的位置；如果是负数，则指示从集合末端开始的偏移量。</td></tr><tr><td>end</td><td>基于 0 的整数值，指示结束选取元素的位置；如果是负数，则指示从集合末端开始的偏移量。 如果省略，则选取范围会在集合末端结束。</td></tr></table>例如，给第一第二个p元素加粗：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).slice(<span class="number">0</span>, <span class="number">2</span>).wrapInner(<span class="string">"&lt;b&gt;&lt;/b&gt;"</span>);</span><br></pre></td></tr></table></figure><p>给倒数第二个p元素加粗：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).slice(<span class="number">-2</span>, <span class="number">-1</span>).wrapInner(<span class="string">"&lt;b&gt;&lt;/b&gt;"</span>);</span><br></pre></td></tr></table></figure><p></p><p>给第三个及其以后的p元素加粗：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).slice(<span class="number">2</span>).wrapInner(<span class="string">"&lt;b&gt;&lt;/b&gt;"</span>);</span><br></pre></td></tr></table></figure><p></p><h2 id="查找"><a href="#查找" class="headerlink" title="查找"></a>查找</h2><h3 id="children"><a href="#children" class="headerlink" title="children()"></a>children()</h3><p>返回匹配元素集合中每个元素的子元素，添加可选参数可通过选择器进行过滤。</p><p>例如：找到div的所有包含selected类的子元素，然后将其置为蓝色：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>Hello<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"selected"</span>&gt;</span>Hello Again<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"selected"</span>&gt;</span>And Again<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>And One Last Time<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$( <span class="string">"div"</span> ).children( <span class="string">".selected"</span> ).css( <span class="string">"color"</span>, <span class="string">"blue"</span> );</span><br></pre></td></tr></table></figure><h3 id="closest-selector"><a href="#closest-selector" class="headerlink" title="closest(selector)"></a>closest(selector)</h3><p><code>closest()</code>方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。</p><p>例如，当列表被点击的时候添加背景色，其余的移除背景色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$( <span class="built_in">document</span> ).bind(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"> e </span>) </span>&#123;</span><br><span class="line">    $( e.target ).closest(<span class="string">"li"</span>).addClass(<span class="string">"hilight"</span>).siblings().removeClass(<span class="string">"hilight"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><h3 id="find-selector"><a href="#find-selector" class="headerlink" title="find(selector)"></a>find(selector)</h3><p><code>find()</code>方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。</p><p>例如：搜索所有段落中的后代 span 元素，并将其颜色设置为红色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).find(<span class="string">"span"</span>).css(<span class="string">'color'</span>,<span class="string">'red'</span>);</span><br></pre></td></tr></table></figure><p></p><h3 id="next-selector"><a href="#next-selector" class="headerlink" title="next(selector)"></a>next(selector)</h3><p><code>next()</code>获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。</p><p>例如，有如下简单列表：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"third-item"</span>&gt;</span>list item 3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>将list item 4添加红色背景色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'li.third-item'</span>).next().css(<span class="string">'background-color'</span>, <span class="string">'red'</span>);</span><br></pre></td></tr></table></figure><p></p><p>将list item 3添加红色背景色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'li'</span>).next(<span class="string">'.third-item'</span>).css(<span class="string">'background-color'</span>, <span class="string">'red'</span>);</span><br></pre></td></tr></table></figure><p></p><p>等价于：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'ul'</span>).find(<span class="string">'.third-item'</span>).css(<span class="string">'background-color'</span>, <span class="string">'red'</span>);</span><br></pre></td></tr></table></figure><p></p><h3 id="nextAll-selector"><a href="#nextAll-selector" class="headerlink" title="nextAll(selector)"></a>nextAll(selector)</h3><p>查找当前元素之后所有的同辈元素。</p><p>还是上面的例子，给list item 3之后的所有同级li添加红色背景色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'li.third-item'</span>).nextAll().css(<span class="string">'background-color'</span>, <span class="string">'red'</span>);</span><br></pre></td></tr></table></figure><p></p><p>选择器用法，给含有red类的li添加红色背景色：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"red"</span>&gt;</span>list item 3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"red"</span>&gt;</span>list item 5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">    $(<span class="string">'li'</span>).nextAll(<span class="string">'.red'</span>).css(<span class="string">'background-color'</span>, <span class="string">'red'</span>);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><h3 id="nextUntil"><a href="#nextUntil" class="headerlink" title="nextUntil()"></a>nextUntil()</h3><p>查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。</p><p>例如，有如下列表：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">dl</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dt</span> <span class="attr">id</span>=<span class="string">"term-1"</span>&gt;</span>term 1<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>definition 1-a<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>definition 1-b<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>definition 1-c<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>definition 1-d<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dt</span> <span class="attr">id</span>=<span class="string">"term-2"</span>&gt;</span>term 2<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>definition 2-a<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>definition 2-b<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>definition 2-c<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dt</span> <span class="attr">id</span>=<span class="string">"term-3"</span>&gt;</span>term 3<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>definition 3-a<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>definition 3-b<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">dl</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>找到跟随 <code>&lt;dt id=&quot;term-1&quot;&gt;</code> 的同胞元素，直到 <code>&lt;dt id=&quot;term-3&quot;&gt;</code>，并为它们设置蓝色文本颜色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"#term-1"</span>).nextUntil(<span class="string">"#term-3"</span>).css(<span class="string">"color"</span>, <span class="string">"blue"</span>);</span><br></pre></td></tr></table></figure><p></p><p>效果如图：</p><p><img src="img/80432505-file_1493884618635_964b.png" alt="80432505-file_1493884618635_964b.png"></p><p>找到跟随 <code>&lt;dt id=&quot;term-1&quot;&gt;</code> 的<code>&lt;dd&gt;</code>同胞元素，直到 <code>&lt;dt id=&quot;term-3&quot;&gt;</code>，并为它们设置蓝色文本颜色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"#term-1"</span>).nextUntil(<span class="string">"#term-3"</span>,<span class="string">'dd'</span>).css(<span class="string">"color"</span>, <span class="string">"blue"</span>);</span><br></pre></td></tr></table></figure><p></p><p><img src="img/35503396-file_1493884703667_655a.png" alt="35503396-file_1493884703667_655a.png"> 获得<strong>被定位</strong>的最近祖先元素。这些定位包括<code>relative</code>，<code>absolute</code>或<code>fixed</code>。</p><p>例如，有如下html：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"level-1"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item-i"</span>&gt;</span>I<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item-ii"</span> <span class="attr">style</span>=<span class="string">"position: relative;"</span>&gt;</span>II</span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"level-2"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item-a"</span>&gt;</span>A<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item-b"</span>&gt;</span>B</span><br><span class="line">                <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"level-3"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item-1"</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item-2"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item-3"</span>&gt;</span>3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item-c"</span>&gt;</span>C<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item-iii"</span>&gt;</span>III<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>给<code>&lt;li class=&quot;item-a&quot;&gt;</code>最近的被定位父元素，即<code>&lt;li class=&quot;item-ii&quot; style=&quot;position: relative;&quot;&gt;</code>添加红色背景色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'li.item-a'</span>).offsetParent().css(<span class="string">'background-color'</span>, <span class="string">'red'</span>);</span><br></pre></td></tr></table></figure><p></p><h3 id="parent-selector"><a href="#parent-selector" class="headerlink" title="parent(selector)"></a>parent(selector)</h3><p>获取匹配元素最近的父元素。</p><p>接着上面的例子，给<code>&lt;li class=&quot;item-a&quot;&gt;</code>的父元素，即<code>&lt;ul class=&quot;level-2&quot;&gt;</code>添加红色背景色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'li.item-a'</span>).parent().css(<span class="string">'background-color'</span>, <span class="string">'red'</span>);﻿​</span><br></pre></td></tr></table></figure><p></p><p>再如有如下html：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>Hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"selected"</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>Hello Again<span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).parent(<span class="string">".selected"</span>).css(<span class="string">"background"</span>, <span class="string">"yellow"</span>);</span><br></pre></td></tr></table></figure><p>结果只有Hello Again拥有黄色背景色。</p><h3 id="parents-selector"><a href="#parents-selector" class="headerlink" title="parents(selector)"></a>parents(selector)</h3><p>获取匹配元素的符合筛选器selector所有层级的父元素。</p><p>有如下html：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">span</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">b</span>&gt;</span><span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = $(<span class="string">"b"</span>).parents().map(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.nodeName;</span><br><span class="line">&#125;).get().join(<span class="string">','</span>);</span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">//SPAN,P,DIV,BODY,HTML</span></span><br><span class="line"><span class="keyword">var</span> b = $(<span class="string">"b"</span>).parents(<span class="string">"p"</span>).map(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.nodeName;</span><br><span class="line">&#125;).get().join(<span class="string">','</span>);</span><br><span class="line"><span class="built_in">console</span>.log(b); <span class="comment">//P</span></span><br></pre></td></tr></table></figure><h3 id="parentsUntil-selector"><a href="#parentsUntil-selector" class="headerlink" title="parentsUntil(selector)"></a>parentsUntil(selector)</h3><p>查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。</p><p>接着上面的html，有如下js代码：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> parentEls = $(<span class="string">"b"</span>).parentsUntil(<span class="string">'div'</span>).map(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.nodeName;</span><br><span class="line">&#125;).get().join(<span class="string">','</span>);</span><br><span class="line"><span class="built_in">console</span>.log(parentEls); <span class="comment">// SPAN,P</span></span><br></pre></td></tr></table></figure><p></p><h3 id="prev-selector"><a href="#prev-selector" class="headerlink" title="prev(selector)"></a>prev(selector)</h3><p>和<code>next(selector)</code>相反。</p><h3 id="prevAll-selector"><a href="#prevAll-selector" class="headerlink" title="prevAll(selector)"></a>prevAll(selector)</h3><p>和<code>nextAll(selector)</code>相反。</p><h3 id="prevUntil-selector"><a href="#prevUntil-selector" class="headerlink" title="prevUntil(selector)"></a>prevUntil(selector)</h3><p>和<code>nextUntil()</code>相反。</p><h3 id="siblings-selector"><a href="#siblings-selector" class="headerlink" title="siblings(selector)"></a>siblings(selector)</h3><p>匹配集合中每个元素的同胞。</p><h2 id="串联"><a href="#串联" class="headerlink" title="串联"></a>串联</h2><h3 id="add"><a href="#add" class="headerlink" title="add()"></a>add()</h3><p><code>add()</code> 方法将元素添加到匹配元素的集合中。</p><p>例如，查找所有div并添加边框。然后将所有p添加到jQuery对象中并将其背景设置为黄色。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$( <span class="string">"div"</span> ).css( <span class="string">"border"</span>, <span class="string">"2px solid red"</span> ).add( <span class="string">"p"</span> ).css( <span class="string">"background"</span>, <span class="string">"yellow"</span> );</span><br></pre></td></tr></table></figure><p></p><p>这里只有div添加了边框！</p><p>给所有p和span添加黄色背景色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$( <span class="string">"p"</span> ).add( <span class="string">"span"</span> ).css( <span class="string">"background"</span>, <span class="string">"yellow"</span> );</span><br></pre></td></tr></table></figure><p></p><h3 id="addBack"><a href="#addBack" class="headerlink" title="addBack()"></a>addBack()</h3><p>该函数用于替代1.8版本之前的<code>andSelf()</code>函数。</p><p>通过一个例子来洞察其作用：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"third-item"</span>&gt;</span>list item 3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = $(<span class="string">'li.third-item'</span>).nextAll().map(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.innerHTML</span><br><span class="line">&#125;).get().join(<span class="string">','</span>);</span><br><span class="line"><span class="keyword">var</span> b = $(<span class="string">'li.third-item'</span>).nextAll().addBack().map(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.innerHTML</span><br><span class="line">&#125;).get().join(<span class="string">','</span>);</span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// list item 4,list item 5</span></span><br><span class="line"><span class="built_in">console</span>.log(b); <span class="comment">// list item 3,list item 4,list item 5</span></span><br></pre></td></tr></table></figure><h3 id="contents"><a href="#contents" class="headerlink" title="contents()"></a>contents()</h3><p><code>contents()</code>方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点。</p><p>例如：找到p中的所有文本节点，并用粗体标签包装它们：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).contents().filter(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="keyword">return</span> <span class="keyword">this</span>.nodeType != <span class="number">1</span>; &#125;).wrap(<span class="string">"&lt;b/&gt;"</span>);</span><br></pre></td></tr></table></figure><p></p><p>下表为html中nodeType的取值：</p><p><table><tr><th colspan="2">节点类型</th><th>描述</th></tr><tr><td>1</td><td>Element</td><td>代表元素</td></tr><tr><td>2</td><td>Attr</td><td>代表属性</td></tr><tr><td>3</td><td>Text</td><td>代表元素或属性中的文本内容。</td></tr><tr><td>4</td><td>CDATASection</td><td>代表文档中的 CDATA 部分（不会由解析器解析的文本）。</td></tr><tr><td>5</td><td>EntityReference</td><td>代表实体引用。</td></tr><tr><td>6</td><td>Entity</td><td>代表实体。</td></tr><tr><td>7</td><td>ProcessingInstruction</td><td>代表处理指令。</td></tr><tr><td>8</td><td>Comment</td><td>代表注释。</td></tr><tr><td>9</td><td>Document</td><td>代表整个文档（DOM 树的根节点）。</td></tr><tr><td>10</td><td>DocumentType</td><td>向为文档定义的实体提供接口</td></tr><tr><td>11</td><td>DocumentFragment</td><td>代表轻量级的 Document 对象，能够容纳文档的某个部分</td></tr><tr><td>12</td><td>Notation</td><td>代表 DTD 中声明的符号。</td></tr></table></p><h3 id="end"><a href="#end" class="headerlink" title="end()"></a>end()</h3><p><code>end()</code>方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为一开始的状态。</p><p>例如，现有如下html：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"first"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"foo"</span>&gt;</span>list item 1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>list item 2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"bar"</span>&gt;</span>list item 3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span>﻿​</span><br></pre></td></tr></table></figure><p></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'ul.first'</span>).find(<span class="string">'.foo'</span>).css(<span class="string">'background-color'</span>, <span class="string">'red'</span>)</span><br><span class="line">    .end().find(<span class="string">'.bar'</span>).css(<span class="string">'background-color'</span>, <span class="string">'green'</span>);</span><br></pre></td></tr></table></figure><p>这条链式的jQuery操作代码首先选取了类名为first的ul，然后使用<code>find(&#39;.foo&#39;)</code>找到<code>&lt;li class=&quot;foo&quot;&gt;list item 1&lt;/li&gt;</code>，给其添加了红色背景色。随后，<code>end()</code>方法将jQuery对象还原为一开始的状态，即<code>(&#39;ul.first&#39;)</code>，再使用<code>find(&#39;.bar&#39;)</code>找到<code>&lt;li class=&quot;bar&quot;&gt;list item 3&lt;/li&gt;</code>，给其添加绿色背景色。</p><p>效果如下图所示：</p><p><img src="img/75829396-file_1493894656006_1843e.png" alt="75829396-file_1493894656006_1843e.png"></p><p>如果去除<code>end()</code>函数，会因找不到<code>&lt;li class=&quot;bar&quot;&gt;list item 3&lt;/li&gt;</code>，添加绿色背景色失败。去除<code>end()</code>效果如下：</p><p><img src="img/59593815-file_1493894788985_f6f3.png" alt="59593815-file_1493894788985_f6f3.png"></p><p>一般为了视觉上的对称，上面的代码末端也加上<code>end()</code>：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'ul.first'</span>).find(<span class="string">'.foo'</span>)</span><br><span class="line">    .css(<span class="string">'background-color'</span>, <span class="string">'red'</span>)</span><br><span class="line">  .end().find(<span class="string">'.bar'</span>)</span><br><span class="line">    .css(<span class="string">'background-color'</span>, <span class="string">'green'</span>)</span><br><span class="line">  .end();</span><br></pre></td></tr></table></figure><p></p><blockquote><p><strong>参考网站</strong><br><a href="http://api.jquery.com/" target="_blank" rel="noopener">http://api.jquery.com/</a><br><a href="http://www.w3school.com.cn/jquery" target="_blank" rel="noopener">http://www.w3school.com.cn/jquery</a><br><a href="http://caibaojian.com/jquery" target="_blank" rel="noopener">http://caibaojian.com/jquery</a><br></p></blockquote><script>$(".post-body a").not(".thispage").addClass("ignore-href").attr("target","_blank")</script></div><div></div><div><div style="padding:10px 0;margin:20px auto;width:90%;text-align:center;color:#878787"><div>请作者喝瓶肥宅水~</div><button id="rewardButton" style="margin-top:10px" disable="enable" onclick='var e=document.getElementById("QR");"none"===e.style.display?e.style.display="block":e.style.display="none"'><span style="height:46px;width:46px;line-height:46px;border-radius:50%;color:#fe5f55;font-weight:600;background:#ffd5be;border:none;box-shadow:0 4px 8px 0 rgba(255,213,190,.4)">￥</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/img/wechat_pay.png" alt="MrBird WeChat Pay"></div><div id="alipay" style="display:inline-block"><img id="alipay_qr" src="/img/ali_pay.png" alt="MrBird Alipay"></div></div></div><style>#QR img{width:auto;margin:.8em 1em 0 1em}</style></div><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong> MrBird</li><li class="post-copyright-link"><strong>本文链接：</strong> <a href="http://mrbird.cc/jQuery筛选操作.html" title="jQuery筛选操作">http://mrbird.cc/jQuery筛选操作.html</a></li><li class="post-copyright-license"><strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！</li></ul></div><footer class="post-footer"><div class="post-tags" style="margin-bottom:1.3rem"><a href="/tags/jQuery/" rel="tag"># jQuery</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/jQuery操作文档新姿势.html" rel="next" title="jQuery操作文档新姿势"><i class="fa fa-chevron-left"></i> jQuery操作文档新姿势</a></div><span class="post-nav-divider"></span><div class="post-nav-prev post-nav-item"><a href="/Leanote博客主题Summer.html" rel="prev" title="Leanote博客主题Summer">Leanote博客主题Summer <i class="fa fa-chevron-right"></i></a></div></div></footer></article><hr><div id="container"></div><div class="post-spread"><div id="comment-div"></div><style>.valine .vlist{margin-bottom:3rem}.valine .vwrap .vcontrol .col.col-60{text-align:left}.valine .vlist .vcard .vhead,.valine .vlist .vcard section .vfooter{text-align:left}.valine .vlist .vcard section{padding-bottom:.5rem!important}.vname{color:#42b983!important}.valine .vinfo .col{text-align:left;margin-left:-27rem}div#comment-div{margin-bottom:-8rem}.valine .vlist .vcard .vcontent .code,.valine .vlist .vcard .vcontent code,.valine .vlist .vcard .vcontent pre{background:#fbfbfb}.valine .vlist .vcard .vcontent a{color:#42b983}.valine .vlist .vcard .vimg{border-radius:3px}.valine .vbtn{border-radius:2px;padding:.3rem 1.25rem}.valine .vbtn:active,.valine .vbtn:hover{color:#42b983;border-color:#42b983;background-color:#fff}.valine .vwrap .vheader .vinput:focus{border-bottom-color:#42b983}.valine .vlist .vcard .vcontent.expand:before{background:-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(hsla(0,0%,100%,.2)));background:linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.2))}.valine .vlist .vcard .vcontent.expand:after{content:"点击展开";font-size:.4rem;text-align:right;left:-1rem;background:hsla(0,0%,100%,.2)}.valine .vlist .vcard section .vfooter .vat{color:#b3b3b3}.valine .vlist .vcard section .vfooter .vat:hover{color:#42b983}.vcontent img{margin:0}.valine .info{display:none}</style><script type="text/javascript" src="/js/av.min.js"></script><script type="text/javascript" src="/js/Valine.min.js"></script><script type="text/javascript" src="/js/activate-power-mode.js"></script><script>POWERMODE.colorful=!0,POWERMODE.shake=!1,document.body.addEventListener("input",POWERMODE),new Valine({el:"#comment-div",notify:!1,verify:!0,appId:"SMcDFP1bN1jgb9Lo8JmtICHm-gzGzoHsz",appKey:"dH4nrUrt3V5XiJiI6Qyejnbi",placeholder:"",path:window.location.pathname,avatar:"monsterid",guest_info:["nick","mail","link"]});var chicken='<a href="#"><img src="https://image.uisdc.com/wp-content/uploads/2018/06/uisdc-chat-chicken.gif" class="checken"></a>';$("#comment-div").prepend(chicken)</script></div></div><script>var $bqinline=$("img[alt='bq-inline']");$bqinline.css({width:"2.3rem",height:"2.3rem",display:"inline","vertical-align":"text-bottom"})</script></div><div class="comments" id="comments"></div></div><aside id="sidebar" class="sidebar" onselectstart="return!1"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">Contents</li><li class="sidebar-nav-overview" data-target="site-overview">Site Preview</li></ul><section class="site-overview sidebar-panel"><div class="sidebar-sticky sticky"><div itemscope itemtype="http://schema.org/Person"><div class="author__avatar"><img src="/images/blogImage.jpg" class="author__avatar" alt="MrBird" itemprop="image"></div><div class="author__content"><h3 class="author__name" itemprop="name">MrBird's Blog</h3><p class="author__bio" itemprop="description">A simple blog, code repository, just keep blogging</p></div><div class="author__urls-wrapper"><button class="btn btn--inverse">Follow</button><ul class="author__urls social-icons"><li><a href="http://map.baidu.com/?newmap=1&s=s%26wd%3D%E7%A6%8F%E5%B7%9E%E5%B8%82%26c%3D300&from=alamap&tpl=mapcity" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-map-marker" aria-hidden="true"></i>&nbsp;&nbsp;FuZhou,CN</a></li><li><a href="https://love.mrbird.cc" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-diamond" aria-hidden="true"></i>&nbsp;&nbsp;Love</a></li><li><a href="https://cloud.mrbird.cn" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-chain" aria-hidden="true"></i>&nbsp;&nbsp;FEBS</a></li><li><a href="/atom.xml" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-rss" aria-hidden="true"></i>&nbsp;&nbsp;RSS</a></li><li><a href="https://gitee.com/mrbirdd" target="_blank" itemprop="sameAs" class="ignore-href"><i class="fa fa-fw fa-codepen" aria-hidden="true"></i>&nbsp;&nbsp;Gitee</a></li><li><a href="https://github.com/wuyouzhuguli" target="_blank" itemprop="sameAs" class="ignore-href"><i class="fa fa-fw fa-github-alt" aria-hidden="true"></i>&nbsp;&nbsp;GitHub</a></li><li><a href="javascript:;" class="popup-trigger"><i class="fa fa-fw fa-search" aria-hidden="true"></i>&nbsp;&nbsp;Search</a></li></ul></div></div></div><script>var $urls=$(".author__urls").find("a");$urls.each(function(){var o=$(this);o.mouseenter(function(){o.css({color:"#414547"})}),o.mouseleave(function(){o.css({color:""})})})</script></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#过滤"><span class="nav-number">1.</span> <span class="nav-text">过滤</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#eq-index"><span class="nav-number">1.1.</span> <span class="nav-text">eq(index)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#first"><span class="nav-number">1.2.</span> <span class="nav-text">first()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#last"><span class="nav-number">1.3.</span> <span class="nav-text">last()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#hasClass-class"><span class="nav-number">1.4.</span> <span class="nav-text">hasClass(class)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#filter-selector-fn"><span class="nav-number">1.5.</span> <span class="nav-text">filter(selector,[fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#is-selector-fn"><span class="nav-number">1.6.</span> <span class="nav-text">is(selector,[fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#map-callback-index-domElement"><span class="nav-number">1.7.</span> <span class="nav-text">map(callback(index,domElement))</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#has-selector"><span class="nav-number">1.8.</span> <span class="nav-text">has(selector)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#not"><span class="nav-number">1.9.</span> <span class="nav-text">not()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#slice-selector-end-​"><span class="nav-number">1.10.</span> <span class="nav-text">slice(selector,end)﻿​</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#查找"><span class="nav-number">2.</span> <span class="nav-text">查找</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#children"><span class="nav-number">2.1.</span> <span class="nav-text">children()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#closest-selector"><span class="nav-number">2.2.</span> <span class="nav-text">closest(selector)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#find-selector"><span class="nav-number">2.3.</span> <span class="nav-text">find(selector)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#next-selector"><span class="nav-number">2.4.</span> <span class="nav-text">next(selector)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#nextAll-selector"><span class="nav-number">2.5.</span> <span class="nav-text">nextAll(selector)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#nextUntil"><span class="nav-number">2.6.</span> <span class="nav-text">nextUntil()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#parent-selector"><span class="nav-number">2.7.</span> <span class="nav-text">parent(selector)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#parents-selector"><span class="nav-number">2.8.</span> <span class="nav-text">parents(selector)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#parentsUntil-selector"><span class="nav-number">2.9.</span> <span class="nav-text">parentsUntil(selector)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#prev-selector"><span class="nav-number">2.10.</span> <span class="nav-text">prev(selector)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#prevAll-selector"><span class="nav-number">2.11.</span> <span class="nav-text">prevAll(selector)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#prevUntil-selector"><span class="nav-number">2.12.</span> <span class="nav-text">prevUntil(selector)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#siblings-selector"><span class="nav-number">2.13.</span> <span class="nav-text">siblings(selector)</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#串联"><span class="nav-number">3.</span> <span class="nav-text">串联</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#add"><span class="nav-number">3.1.</span> <span class="nav-text">add()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#addBack"><span class="nav-number">3.2.</span> <span class="nav-text">addBack()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#contents"><span class="nav-number">3.3.</span> <span class="nav-text">contents()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#end"><span class="nav-number">3.4.</span> <span class="nav-text">end()</span></a></li></ol></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer" onselectstart="return!1"><div class="footer-inner"><div class="copyright">&copy; 2016 - <span itemprop="copyrightYear">2019</span>&nbsp;&nbsp; <span class="author" itemprop="copyrightHolder">MrBird</span>&nbsp;&nbsp;|<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>&nbsp;&nbsp;UV&nbsp;<span class="busuanzi-value" id="busuanzi_value_site_uv" style="cursor:pointer" title="统计开始时间：2019年7月5日"></span> &nbsp;&nbsp;PV&nbsp;<span class="busuanzi-value" id="busuanzi_value_site_pv" style="cursor:pointer" title="统计开始时间：2019年7月5日"></span></div></div></footer><div class="back-to-top"><span style="font-family:'Source Sans Pro','Helvetica Neue',Arial,sans-serif;font-size:1.2em;font-weight:600">TOP</span></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/js/src/utils.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/motion.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.1"></script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="search-popup-overlay local-search-pop-overlay"></div>').css("overflow","hidden"),$(".search-popup-overlay").click(onPopupClose),$(".popup").toggle();var t=$("#local-search-input");t.attr("autocapitalize","none"),t.attr("autocorrect","off"),t.focus()}var isfetched=!1,isXml=!0,search_path="search.xml";0===search_path.length?search_path="search.xml":search_path.endsWith("json")&&(isXml=!1);var path="/"+search_path,onPopupClose=function(t){$(".popup").hide(),$("#local-search-input").val(""),$(".search-result-list").remove(),$("#no-result").remove(),$(".local-search-pop-overlay").remove(),$("body").css("overflow","")},searchFunc=function(t,e,o){"use strict";$("body").append('<div class="search-popup-overlay local-search-pop-overlay"><div id="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i></div></div>').css("overflow","hidden"),$("#search-loading-icon").css("margin","20% auto 0 auto").css("text-align","center"),$.ajax({url:t,dataType:isXml?"xml":"json",async:!0,success:function(t){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var n=isXml?$("entry",t).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get():t,r=document.getElementById(e),s=document.getElementById(o),a=function(){var t=r.value.trim().toLowerCase(),e=t.split(/[\s\-]+/);e.length>1&&e.push(t);var o=[];if(t.length>0&&n.forEach(function(n){function r(e,o,n,r){for(var s=r[r.length-1],a=s.position,i=s.word,l=[],h=0;a+i.length<=n&&0!=r.length;){i===t&&h++,l.push({position:a,length:i.length});var p=a+i.length;for(r.pop();0!=r.length&&(s=r[r.length-1],a=s.position,i=s.word,p>a);)r.pop()}return c+=h,{hits:l,start:o,end:n,searchTextCount:h}}function s(t,e){var o="",n=e.start;return e.hits.forEach(function(e){o+=t.substring(n,e.position);var r=e.position+e.length;o+='<b class="search-keyword">'+t.substring(e.position,r)+"</b>",n=r}),o+=t.substring(n,e.end)}var a=!1,i=0,c=0,l=n.title.trim(),h=l.toLowerCase(),p=n.content.trim().replace(/<[^>]+>/g,""),u=p.toLowerCase(),f=decodeURIComponent(n.url),d=[],g=[];if(""!=l&&(e.forEach(function(t){function e(t,e,o){var n=t.length;if(0===n)return[];var r=0,s=[],a=[];for(o||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,r))>-1;)a.push({position:s,word:t}),r=s+n;return a}d=d.concat(e(t,h,!1)),g=g.concat(e(t,u,!1))}),(d.length>0||g.length>0)&&(a=!0,i=d.length+g.length)),a){[d,g].forEach(function(t){t.sort(function(t,e){return e.position!==t.position?e.position-t.position:t.word.length-e.word.length})});var v=[];0!=d.length&&v.push(r(l,0,l.length,d));for(var C=[];0!=g.length;){var $=g[g.length-1],m=$.position,x=$.word,w=m-20,y=m+80;w<0&&(w=0),y<m+x.length&&(y=m+x.length),y>p.length&&(y=p.length),C.push(r(p,w,y,g))}C.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hits.length!==e.hits.length?e.hits.length-t.hits.length:t.start-e.start});var T=parseInt("1");T>=0&&(C=C.slice(0,T));var b="";b+=0!=v.length?"<li><a href='"+f+"' class='search-result-title'>"+s(l,v[0])+"</a>":"<li><a href='"+f+"' class='search-result-title'>"+l+"</a>",C.forEach(function(t){b+="<a href='"+f+'\'><p class="search-result">'+s(p,t)+"...</p></a>"}),b+="</li>",o.push({item:b,searchTextCount:c,hitCount:i,id:o.length})}}),1===e.length&&""===e[0])s.innerHTML='<div id="no-result"><i class="fa fa-search fa-5x" /></div>';else if(0===o.length)s.innerHTML='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>';else{o.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hitCount!==e.hitCount?e.hitCount-t.hitCount:e.id-t.id});var a='<ul class="search-result-list">';o.forEach(function(t){a+=t.item}),a+="</ul>",s.innerHTML=a}};r.addEventListener("input",a),$(".local-search-pop-overlay").remove(),$("body").css("overflow",""),proceedsearch()}})};$(".popup-trigger").click(function(t){t.stopPropagation(),isfetched===!1?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(onPopupClose),$(".popup").click(function(t){t.stopPropagation()}),$(document).on("keyup",function(t){var e=27===t.which&&$(".search-popup").is(":visible");e&&onPopupClose()})</script></body><script>$(function(){$("a").not(".nav-link,.cloud-tie-join-count,.ignore-href,.jstree-anchor").addClass("animsition-link")});var burst1=new mojs.Burst({left:0,top:0,radius:{5:40},children:{shape:"circle",fill:["red","cyan","orange"],fillOpacity:.8,radiusX:3.5,radiusY:3.5}});document.addEventListener("click",function(a){null==a.target.href&&"footer"!=a.target.className&&"copyright"!=a.target.className&&"author__urls social-icons"!=a.target.className&&"author__avatar"!=a.target.className&&"sidebar sidebar-active"!=a.target.className&&burst1.tune({x:a.pageX,y:a.pageY}).generate().replay()})</script><script type="text/javascript" src="/js/message.js"></script></html><!-- rebuild by neat -->